<template>
	<div class="side-tab">
		<ul class="side-tab-list">
			<li
				v-for="item of sideTabItem"
				:key="item.id"
				@click="toggleTab(item.id)"
			>
				<router-link
					:to="item.path"
					:class="{
						'white-color': item.whiteColor,
						'black-color': item.blackColor,
						'is-active': item.isActive,
					}"
					><i class="iconfont" :class="item.iconClass"></i
					>{{ item.pathName }}</router-link
				>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 侧边选项卡列表
			sideTabItem: [
				{
					id: 1,
					path: "/recommend",
					pathName: "推荐",
					whiteColor: true,
					blackColor: false,
					isActive: true,
					iconClass: {
						"icon-douyin": true,
						recommend: true,
					},
				},
				{
					id: 2,
					path: "/songList",
					pathName: "歌单",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-faxianicon_gedan": true,
						"song-list": true,
					},
				},
				{
					id: 3,
					path: "/radioStation",
					pathName: "电台",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-faxianicon_diantai": true,
						"radio-station": true,
					},
				},
				{
					id: 4,
					path: "/listen",
					pathName: "听书",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-tingshu": true,
						listen: true,
					},
				},
				{
					id: 5,
					path: "/ranking",
					pathName: "排行",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-faxianicon_paihangbang": true,
						ranking: true,
					},
				},
				{
					id: 6,
					path: "/singer",
					pathName: "歌手",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-faxianicon_geshou": true,
						singer: true,
					},
				},
				{
					id: 7,
					path: "/classify",
					pathName: "分类",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-fenlei": true,
						classify: true,
					},
				},
				{
					id: 8,
					path: "/video",
					pathName: "视频",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-shipin3": true,
						video: true,
					},
				},
				{
					id: 9,
					path: "/liveTelecast",
					pathName: "直播",
					whiteColor: false,
					blackColor: true,
					isActive: false,
					iconClass: {
						"icon-shoucang1": true,
						"live-telecast": true,
					},
				},
			],
		};
	},
	methods: {
		// 切换选项卡选中状态
		toggleTab(id) {
			this.sideTabItem.forEach((item) => {
				if (id == item.id) {
					this.$store.commit("updatePath", item.path);
					item.isActive = true;
					item.blackColor = false;
					item.whiteColor = true;
				} else {
					item.isActive = false;
					item.whiteColor = false;
					item.blackColor = true;
				}
			});
		},
	},
	mounted() {
		// 页面刷新,监视路由地址的变化,然后选中当前路由地址所对应的侧边选项卡
		this.sideTabItem.forEach((item) => {
			if (this.$route.path == item.path) {
				item.isActive = true;
				item.blackColor = false;
				item.whiteColor = true;
			} else {
				item.isActive = false;
				item.whiteColor = false;
				item.blackColor = true;
			}
		});
	},
	watch: {
		// 监视路由地址的变化,然后选中当前路由地址所对应的侧边选项卡
		$route() {
			this.sideTabItem.forEach((item) => {
				if (this.$route.path == item.path) {
					item.isActive = true;
					item.blackColor = false;
					item.whiteColor = true;
				} else {
					item.isActive = false;
					item.whiteColor = false;
					item.blackColor = true;
				}
			});
		},
	},
};
</script>
<style lang="scss">
.side-tab {
	box-sizing: border-box;
	position: fixed;
	top: 80px;
	left: 0;
	width: 140px;
	height: 100vh;
	padding: 26px 12px;
	background-color: #fff;
	z-index: 99;
	.side-tab-list {
		width: 100%;
		li {
			width: 100%;
			height: 36px;
			margin-bottom: 16px;
			a {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				font-size: 14px;
				border-radius: 7px;
				&:hover {
					background-color: #f7f7f7;
				}
				i {
					font-size: 20px;
					margin-right: 7px;
					&.recommend {
						font-size: 26px;
						margin-right: 1px;
						transform: translateX(-2px);
					}
					&.listen {
						font-size: 24px;
					}
					&.singer {
						font-size: 22px;
					}
					&.video {
						font-size: 19px;
					}
					&.live-telecast {
						font-size: 19px;
					}
				}
			}
			.is-active {
				cursor: default;
				background-image: linear-gradient(to right, #84b2fe, #5192fe);
			}
			.white-color {
				color: #fff;
			}
			.black-color {
				color: #333;
				i {
					color: #5192fe;
				}
			}
		}
	}
}
</style>
